<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lunar.js" type="application/javascript"></script>
    <script src="jquery-1.10.2.js" type="application/javascript"></script>
    <script src="angular-1.4.0-rc.2/angular.min.js" type="application/javascript"></script>

</head>
<body ng-app="myApp" ng-controller="formCtrl">
<br>
显示0:<input type="radio" name="a" value="0" ng-click="show()" ng-model="a">
隐藏1:<input type="radio" name="a" value="1" ng-click="show()" ng-model="a">

<div id="x" ng-show="div_show">xxxxx</div>
<br>

<label><input ng-model="fruits.apple" name="fruit" type="checkbox" value="apple"/>苹果 </label>
<label><input ng-model="fruits.peer" name="fruit" type="checkbox" value="peer"/>梨 </label>
<br>
<br>
<ul>
    {{fruits}}
    <li ng-repeat="(key,value) in fruits | myFilter:true">
        {{key}}<input type="checkbox" name="newfruit" value="{{key}}" ng-checked="{{value}}">
    </li>
</ul>

<!-- data table grid -->
<table cellpadding="0" cellspacing="0" border="0" ng-table="tableParams" show-filter="true">
    <tbody>
    <tr ng-repeat="block in $data">
        <!-- serial number -->
        <td data-title="" style="text-align:center" width="4">{{$index+1}}</td>
        <!-- Checkbox -->
        <td data-title="" class="center" header="'ng-table/headers/checkbox.html'" width="4">
            <input type="checkbox" ng-model="checkboxes.items[block.id]"/>
        </td>
        <!-- Block Name -->
        <td data-title="" sortable="'block_name'" filter="{ 'block_name': 'text' }">
            <span ng-if="!block.$edit">{{block.block_name}}</span>

            <div ng-if="block.$edit"><input class="form-control" type="text" ng-model="block.block_name"/></div>
        </td>
        <!-- Description -->
        <td data-title="" sortable="'description'">
            <span ng-if="!block.$edit">{{block.description}}</span>
            <div ng-if="block.$edit"><textarea class="form-control" ng-model="block.description"></textarea></div>
        </td>
        <!-- Edit / Save button -->
        <td data-title="" width="6" style="text-align:center">
            <a ng-if="!block.$edit" href="" class="btn btn-inverse btn-sm" ng-click="block.$edit = true"></a>
            <a ng-if="block.$edit" href="" class="btn btn-green btn-sm" ng-click="block.$edit = false;update(block)"></a>
        </td>
    </tr>
    </tbody>
</table>
<!-- table grid -->
<script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function ($scope) {
        $scope.show = function () {
            $scope.div_show = $scope.a == 0 ? true : false;
        };
    }).filter("myFilter", function () {
        return function (objects, flag) {
            var obj = {};
            for (var key in objects) {
                var isChoose = objects[key];
                if (isChoose == flag) {
                    obj[key] = isChoose;
                }
            }
            return obj;
        }
    });


    app.controller('blockController', function ($scope, $filter, $q, ngTableParams, $sce, Block) {

        // Fetch data from server using RESTful API
        $scope.load = function () {
            // load serverside data using http resource service
            Block.get({}, function (response) { // success
                $scope.results = response.data;
                var data = response.data; // store result to variable

                // Start ng-table with pagination
                $scope.tableParams = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: data.length, // length of data
                    getData: function ($defer, params) {
                        // use build-in angular filter
                        var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                        orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
                        params.total(orderedData.length); // set total for recalc pagination
                        $defer.resolve($scope.blocks = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });

                // un-check all check boxes
                $scope.checkboxes = {'checked': false, items: {}};

                // watch for check all checkbox
                $scope.$watch('checkboxes.checked', function (value) {
                    angular.forEach($scope.blocks, function (item) {
                        if (angular.isDefined(item.id)) {
                            $scope.checkboxes.items[item.id] = value;
                        }
                    });
                });

                // watch for data checkboxes
                $scope.$watch('checkboxes.items', function (values) {
                    if (!$scope.blocks) {
                        return;
                    }
                    var checked = 0, unchecked = 0,
                            total = $scope.blocks.length;
                    angular.forEach($scope.blocks, function (item) {
                        checked += ($scope.checkboxes.items[item.id]) || 0;
                        unchecked += (!$scope.checkboxes.items[item.id]) || 0;
                    });
                    if ((unchecked == 0) || (checked == 0)) {
                        $scope.checkboxes.checked = (checked == total);
                    }
                    // grayed checkbox
                    angular.element(document.getElementById("select_all")).prop("indeterminate", (checked != 0 && unchecked != 0));
                }, true);

            }, function (error) { // error
                $scope.results = [];
                // error message display here
            });
        }

        // Call REST API
        $scope.load();

        /*
         |------------------------------
         | Delete selected items
         |------------------------------
         */

        $scope.delete = function () {

            var items = [];
            // loop through all checkboxes
            angular.forEach($scope.blocks, function (item, key) {
                if ($scope.checkboxes.items[item.id]) {
                    items.push(item.id); // push checked items to array
                }
            });
            // if at least one item checked
            if (items.length > 0) {
                // confirm delete
                bootbox.confirm("Are you sure to delete this data?", function (result) {
                    if (result == true) {
                        for (var i = 0; i < items.length; i++) {
                            // delete using $http resopurce
                            Block.delete({id: items[i]}, function (response) { // success
                                // remove the deleted item from grid here
                                // show message
                            }, function (error) { // error
                                // error message display here
                            });
                        }
                    }
                });
            }
        }; // delete

    }); // end controller
</script>
</body>
</html>